<template>
  <div v-loading="loading">
    <h3>{{ $t("business.workload.general") }}</h3>
    <el-form label-position="top" :model="yamlInfo">
      <el-row :gutter="20">
        <el-col v-if="yamlInfo.spec.restartPolicy" :span="12">
          <el-form-item
            style="margin-left: 20px"
            :label="$t('business.workload.restart_strategy')"
          >
            <span>{{ yamlInfo.spec.restartPolicy }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="yamlInfo.spec.terminationGracePeriodSeconds" :span="12">
          <el-form-item
            style="margin-left: 20px"
            :label="$t('business.workload.termination_grace_period')"
          >
            <span>{{ yamlInfo.spec.terminationGracePeriodSeconds }}</span>
          </el-form-item>
        </el-col>

        <el-col v-if="yamlInfo.spec.dnsPolicy" :span="12">
          <el-form-item
            style="margin-left: 20px"
            :label="$t('business.workload.dns_policy')"
          >
            <span>{{ yamlInfo.spec.dnsPolicy }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="hostNetwork" :span="12">
          <el-form-item
            style="margin-left: 20px"
            :label="$t('business.workload.host_network')"
          >
            <span>{{ hostNetwork }}</span>
          </el-form-item>
        </el-col>

        <el-col v-if="yamlInfo.spec.serviceAccount" :span="12">
          <el-form-item
            style="margin-left: 20px"
            :label="$t('business.workload.service_account')"
          >
            <div class="spanInFormStyle">
              <span :title="yamlInfo.spec.serviceAccount">{{
                yamlInfo.spec.serviceAccount
              }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col v-if="yamlInfo.spec.serviceAccountName" :span="12">
          <el-form-item
            style="margin-left: 20px"
            :label="$t('business.workload.service_account_name')"
          >
            <div class="spanInFormStyle">
              <span :title="yamlInfo.spec.serviceAccountName">{{
                yamlInfo.spec.serviceAccountName
              }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <br />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const yamlInfo = defineModel<any>("yamlInfo");
// const editForm = ref<any>({ spec: {} });
const loading = ref(false);
const hostNetwork = ref("");

watch(
  () => yamlInfo.value,
  newYamlInfo => {
    if (!newYamlInfo) return;
    hostNetwork.value =
      !newYamlInfo.spec?.hostNetwork || !hostNetwork.value
        ? t("business.workload.no")
        : t("business.workload.yes");
  },
  { deep: true }
);
</script>

<style scoped></style>
